<template>
  <div class="base-login">
    <img src="@/assets/login-bg.png" />
    <van-form
      class="login-form"
      @submit="onSubmit"
    >
      <van-field
        v-model="username"
        name="username"
        left-icon="contact"
        placeholder="手机号/身份证号"
        :rules="[{ required: true, message: '请输入手机号/身份证号' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        left-icon="shield-o"
        placeholder="密码"
        :rules="[{ required: true, message: '请输入密码' }]"
      />
      <van-button
        round
        block
        type="info"
        native-type="submit"
      >
        登录
      </van-button>
    </van-form>
    <div class="sign-up-button">
      没有账号？<span @click="onSignUp">注册</span>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "888888",
    };
  },
  methods: {
    ...mapActions([
      'getUserInfo',
    ]),
    onSubmit(values) {
      this.getUserInfo(values);
    },
    onSignUp() {
      this.$router.push("signup")
    },
  },
};
</script>

<style lang="less" scoped>
  .base-login {
    height: 100%;
    display: flex;
    flex-direction: column;

    /deep/.login-form {
      padding: 0 30px;
      margin-top: -20px;

      .van-field__left-icon {
        margin-right: 20px;
      }

      .van-icon {
        font-size: 24px;
      }

      .van-cell {
        border-radius: 24px;
        background-color: #e6effc;
        margin-bottom: 12px;
      }

      .van-button--normal {
        font-size: 18px;
      }
    }

    .sign-up-button {
      position: absolute;
      left:50%;
      bottom: 10%;
      transform: translate(-50%, 0);
      font-size: 14px;

      span {
        color: #0e73ff;
        font-weight: 700;
      }
    }
  }
</style>
